import { mergeAttributes, Node } from '@tiptap/core' // 导入Tiptap的核心模块，包括Node类和mergeAttributes函数
import { VueNodeViewRenderer } from '@tiptap/vue-3' // 导入用于Vue 3的Tiptap渲染器
import NumberPronunciation from '../TextEditComponens/NumberPronunciation.vue' // 导入自定义的Vue组件，用于渲染pause节点
import Pronounce from '../TextEditComponens/Pronounce.vue' // 导入自定义的Vue组件，用于渲染pause节点

export default Node.create({ // 使用Node类的create方法创建一个新的节点扩展
    name: 'phoneme', // 节点的名称，用于标识这个节点
    group: 'inline', // 节点所属的组，这里表示它是一个块级元素
    content: 'text*', // 节点可以包含的内容类型，这里表示可以包含任意数量的内联元素
    inline: true,
    // content: 'text*', // 节点可以包含的内容类型，这里表示可以包含任意数量的内联元素

    parseHTML() { // 定义如何从HTML字符串中解析出这个节点
        return [
            {
                tag: 'phoneme', // 当遇到<phoneme>标签时，将其解析为这个节点
            },
        ]
    },

    renderHTML({ HTMLAttributes }) { // 定义如何将节点渲染成HTML字符串
        return ['phoneme', mergeAttributes(HTMLAttributes), 0] // 返回一个数组，第一个元素是标签名，第二个是属性，第三个是索引
    },

    addNodeView() { // 定义如何渲染节点的视图VueNodeViewRendere
        return VueNodeViewRenderer(Pronounce) // 使用VueNodeViewRenderer函数来渲染NumberPronunciation.vue组件作为节点的视图
    },

    addCommands() { // 定义编辑器命令，这些命令可以通过编程方式或快捷键来调用
        return {

        };
    },

    addAttributes() {
        return {
            text: {
                default: null,
            },
            ph: {
                default: null,
            },
            alphabet: {
                default: 'py',
            },
            subId: {
                default: '',
            },
        }
    },

    // 定义键盘快捷键逻辑
    addKeyboardShortcuts() { // 定义快捷键绑定
        const that = this
        return {
        };
    },
})